<template>
  <div>
    <yd-infinitescroll :callback='load' ref='infinitescrollDemo'>
    <div class="list-body" v-for="item in list" :key="item.index" slot="list">
      <div class="list-title">
        <span class="list-title-name">{{item.name}}</span>
        <br>
        <span class="list-title-price">￥<span style="font-size: .3rem">{{item.guide_price}}</span></span></span>
        <del class="list-del-price">¥{{item.market_price}}</del>
      </div>
      <div class="list-buttom">
        <yd-button type="warning" style="float:right;"  @click.native="clickgetid(item.code)">立即购买</yd-button>
      </div>
      <div>
        <yd-popup v-model="show1" position="bottom" height="70%">
          <yd-layout>
            <yd-navbar slot="navbar" title="产品介绍">
            
          </yd-navbar>
            <p v-html="item.detail"></p>
            <yd-tabbar fixed class="tabbar-style">
                <div  class="tabbar-close" type="warning" @click.native="show1 = false">关&nbsp;闭</div>
                <div class="tabbar-buy" type="warning" @click="clickordersubmit()">立即购买</div>
            </yd-tabbar>
          </yd-layout>
        </yd-popup>
      </div>
    </div>
    <!-- 数据全部加载完毕显示 -->
    <span slot='doneTip'>啦啦啦，啦啦啦，没有数据啦~~</span>
    <!-- 加载中提示，不指定，将显示默认加载中图标 -->
    <img slot='loadingTip' src='http://static.ydcss.com/uploads/ydui/loading/loading10.svg'/>
    </yd-infinitescroll>
  </div>
</template>
<script>
export default {
  name: 'blue-onlinebooking',
  data() {
    return {
      outdata: [],
      pageNo: 1,
      pageSize: 10,
      list: [],
      detaildata: [],
      show1: false,
      code: ''
    }
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      this.hdAjax({
        url: this.API.getHLDSaleList,
        data: {
          place_code: 'J0178',
          pageNo: this.pageNo,
          pageSize: this.pageSize
        },
        success: (resultData) => {
          const _list = resultData.data.results;
          this.list = [...this.list, ..._list];
          if (_list.length < this.pageSize) {
              /* 所有数据加载完毕 */
            this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
            return;
          }
            /* 单次请求数据完毕 */
          this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');
          this.pageNo++;
        }
      });
    },
    clickordersubmit () {
      console.log(this.code)
      this.$router.push({path: 'blue_ordersubmit', query: {code: this.code}});
    },
    clickgetid(code) {
      this.show1 = true;
      this.code = code
    }
  }
}
</script>

<style>
  .list-body{
    margin-top: 15px;
    margin-left: 3%;
    margin-right: 3%;
    height: 50px;
    border-bottom: 1px solid #bbbbbb
  }
  .list-title{
   width:50%;
   float:left;
   
 }
  .list-title-name{
    font-size: .4rem;
    font-weight: 600;
  }
  .list-title-price{
    color: red;
  }
  .list-del-price{
    color: 	#A8A8A8
  }
  .list-buttom{
   float:right;
   width:40%;
 }
 .tabbar-style{
   height:50px;
   text-align:center;
   
 }
 .tabbar-close{
   width:50%;
   height:100%;
   border-right: 1px solid #bbbbbb;
   font-size:.3rem;
   line-height:40px;
   color:#FF8800 ;
 }
 .tabbar-buy{
   width:50%;
   height:100%;
   font-size:.3rem;
   line-height:40px;
   color:#FF8800 ;
 }
</style>
